<template>
  <div class="greenhouse">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-tickets"></i> 温室环境参数</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div v-if="greenhouseFlag" class="content">
      <el-row :gutter="20" v-for="(x, i) in greenhouseState" :key="i" class="row">
        <el-col :span="24">
          <x-greenhouse :info="x"></x-greenhouse>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
 
<script>
import XGreenhouse from './GreenhouseComponent.vue' 
 
export default {
  components: {
    XGreenhouse 
  },
  data() {
    return {
      greenhouseFlag: false,
      greenhouseState: [],
      update: null,
      // 模拟温室数据 
      mockGreenhouseData: [
        {
          id: "gh_001",
          species: "greenhouse",
          name: "1号温室",
          temperature: "25.3℃",
          humidity: "65%",
          co2: "450ppm",
          light: "12000lux",
          soilMoisture: "42%",
          lastUpdate: new Date().toLocaleTimeString()
        },
        {
          id: "gh_002",
          species: "greenhouse",
          name: "2号温室",
          temperature: "23.8℃",
          humidity: "70%",
          co2: "480ppm",
          light: "9500lux",
          soilMoisture: "38%",
          lastUpdate: new Date().toLocaleTimeString()
        },
        {
          id: "gh_003",
          species: "greenhouse",
          name: "3号温室",
          temperature: "26.1℃",
          humidity: "60%",
          co2: "420ppm",
          light: "15000lux",
          soilMoisture: "45%",
          lastUpdate: new Date().toLocaleTimeString()
        }
      ]
    }
  },
  methods: {
    // 模拟获取温室环境参数 
    getGreenhouseState() {
      // 模拟API延迟 
      setTimeout(() => {
        // 随机更新一些数据以模拟实时变化 
        this.mockGreenhouseData.forEach(gh  => {
          gh.temperature  = `${(Math.random()  * 5 + 20).toFixed(1)}℃`;
          gh.humidity  = `${(Math.random()  * 20 + 50).toFixed(0)}%`;
          gh.co2  = `${(Math.random()  * 100 + 400).toFixed(0)}ppm`;
          gh.light  = `${(Math.random()  * 5000 + 8000).toFixed(0)}lux`;
          gh.soilMoisture  = `${(Math.random()  * 20 + 30).toFixed(0)}%`;
          gh.lastUpdate  = new Date().toLocaleTimeString();
        });
        
        this.greenhouseState  = this.mockGreenhouseData; 
        this.greenhouseFlag  = true;
        console.log(' 温室数据更新:', this.greenhouseState); 
      }, 300);
    },
    
    // 模拟定时更新数据 
    startUpdateInterval() {
      this.update  = setInterval(() => {
        console.log(' 模拟数据更新');
        this.getGreenhouseState(); 
      }, 10000);
    }
  },
  activated() {
    this.getGreenhouseState(); 
    this.startUpdateInterval(); 
  },
  deactivated() {
    clearInterval(this.update); 
  }
}
</script>
 
<style scoped>
  .row {
    margin-bottom: 10px;
  }
</style>